<template>
  <div class="list">
    <div class="box">
      <div class="search-box">
        <div class="item">
          <div class="item-title">企业画像</div>
          <div class="condition">
            <el-input v-model="searchForm.text" placeholder="3D打印" size="large">
              <el-button slot="append" class="button" @click="search">搜索</el-button>
            </el-input>
          </div>
          <div class="condition">
            <div style="width: 20%;float:left">线索来源:</div>
            <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-right:20px;">全选</el-checkbox> -->
            <el-checkbox-group v-model="searchForm.sources" @change="handleCheckedCitiesChange">
              <el-checkbox label="1">新闻线索</el-checkbox>
              <el-checkbox label="2">营销线索</el-checkbox>
              <el-checkbox label="3">资产线索</el-checkbox>
              <el-checkbox label="4">工商资质</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="condition">
            <div style="width: 20%">所属地区:</div>
            <el-cascader
              v-model="searchForm.region"
              clearable
              :options="regions"
              :props="{ value: 'id', label: 'cityname', checkStrictly: true }"
              @change="handleChange"
              placeholder="请选择地区"
              style="width:80%"
            />
          </div>
          <div class="condition">
            <div style="width: 20%">行业类型:</div>
            <el-select
              v-model="searchForm.company_tag"
              clearable
              placeholder="所有行业"
              style="width: 80%"
            >
              <el-option
                v-for="(item,index) in industryList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
          <div class="condition">
            <div style="width: 20%">注册年限:</div>
            <el-date-picker
              style="width: 80%"
              v-model="searchForm.company_yaer"
              type="daterange"
              range-separator="-"
              start-placeholder=""
              end-placeholder=""
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const sourceCityOptions = ['1', '2', '3', '4']

import { fetchRegion, fetchIndustry } from "@/api"
export default {
  data() {
    return {
      industryList: [],
      cities: sourceCityOptions,
      checkAll: false,
      isIndeterminate: true,
      regions: [],
      searchForm: {
        text: '',
        sources: ['1', '2'],
        region: '',
        company_tag: '',
        company_yaer: ''
        // province: '',
        // area: '',
        // city: ''
      }
    }
  },
  created() {
    this.getRegion()
    this.fetchIndustry()
  },
  methods: {
    handleCheckAllChange(val) {
      this.searchForm.sources = val ? sourceCityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    getRegion() {
      fetchRegion( res => {
        if (res.code === 200) {
          this.regions = res.data
        }
      })
    },
    search() {
      this.$router.push({
        name: 'portrait/portrait/searchList',
        path: 'portrait/portrait/searchList',
        query: this.searchForm
      })
    },
    handleChange(value) {
      // this.searchForm.province = value[0]
      // this.searchForm.city = value[1]
      // this.searchForm.area = value[2]
    },
    fetchIndustry() {
      fetchIndustry(
        res => {
          if (res.code == 200) {
            this.industryList = res.data;
          }
        },
        err => {}
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/portrait/portrait/search";
</style>
